<template>
  <div class="login-container">
    <!-- 左侧品牌展示区 -->
    <div class="brand-section">
      <div class="brand-content">
        <svg class="logo" width="80" height="80" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="white" stroke-width="2" stroke-linejoin="round"/>
          <path d="M2 17L12 22L22 17" stroke="white" stroke-width="2" stroke-linejoin="round"/>
          <path d="M2 12L12 17L22 12" stroke="white" stroke-width="2" stroke-linejoin="round"/>
        </svg>
        <h1 class="title">新一代银行管理系统</h1>
        <p class="subtitle">智能、安全、高效，引领金融科技未来</p>
      </div>
    </div>

    <!-- 右侧登录表单区 -->
    <div class="form-section">
      <div class="login-box">
        <h2 class="form-title">欢迎回来</h2>
        <p class="form-subtitle">请选择您的登录身份</p>

        <div class="login-tabs">
          <button 
            :class="['tab-button', { active: loginType === 'user' }]"
            @click="loginType = 'user'"
          >
            用户登录
          </button>
          <button 
            :class="['tab-button', { active: loginType === 'admin' }]"
            @click="loginType = 'admin'"
          >
            管理员登录
          </button>
        </div>

        <form @submit.prevent="handleLogin" class="login-form">
          <div class="form-group">
            <label for="username" v-if="loginType==='admin'">
              管理员账号
            </label>
            <label for="username" v-if="loginType==='user'">
              身份证
            </label>
            <input
              v-if="loginType === 'admin'"
              id="username"
              v-model= "adminData.adminID"
              type="text"
              class="form-input"
              :placeholder="'请输入管理员账号'"
              required
            />

            <input
                v-if="loginType === 'user'"
                id="username"
                v-model= "userData.PID"
                type="text"
                class="form-input"
                :placeholder="'请输入身份证'"
                required
            />
          </div>
          <div class="form-group" v-if="loginType === 'admin'">
            <label for="username">
              管理员名称
            </label>
            <input
                id="username"
                v-model="adminData.adminName"
                type="text"
                class="form-input"
                :placeholder="'请输入管理员名称'"
                required
            />
          </div>
          <div class="form-group">
            <label for="password" v-if="loginType === 'user'">密码</label>
            <label for="password" v-if="loginType === 'admin'">管理员密码</label>
            <div class="password-wrapper">
              <input
                v-if="loginType === 'admin'"
                id="password"
                v-model="adminData.adminPass"
                :type="showPassword ? 'text' : 'password'"
                class="form-input"
                placeholder="请输入管理员密码"
                required
              />
              <input
                  v-if="loginType === 'user'"
                  id="password"
                  v-model="userData.pass"
                  :type="showPassword ? 'text' : 'password'"
                  class="form-input"
                  placeholder="请输入密码"
                  required
              />
              <button
                type="button"
                class="password-toggle"
                @click="showPassword = !showPassword"
              >
                <!-- Eye icons will be handled by CSS background images for simplicity -->
              </button>
            </div>
          </div>

          <div class="form-options">
            <label class="checkbox-label">
              <input type="checkbox" v-model="rememberMe" />
              记住我
            </label>
            <a href="#" class="link">忘记密码？</a>
          </div>

          <button type="submit" class="login-button" :disabled="isLoading">
            <span v-if="isLoading" class="spinner"></span>
            {{ isLoading ? '登录中...' : '安全登录' }}
          </button>
        </form>

        <div class="form-footer">
          还没有账户？ <a href="#" class="link">立即注册</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import axios from 'axios'


export default {
  name: 'BankLogin',
  data() {
    return {
      loginType: 'user', // 'user' 或 'admin'
      showPassword: false,
      isLoading: false,
      userData: {
        PID: '',
        pass: '',
      },
      adminData: {
        adminID: '',
        adminName: '',
        adminPass: '',
      },
      rememberMe: false
    }
  },

  methods: {

    handleLogin: async function () {
      this.isLoading = true
      if (this.loginType === 'user') {
        console.log(this.userData)
        axios.post(
            'http://localhost:8057/user/loginByPIDAndPass', this.userData
        ).then(res => {
          console.log(res)
          if (res.data.code === 200) {
            alert('登录成功')
            console.log(res.data.data.customerID)
            let back = res.data.data.customerID
            this.$emit('user-login-success', back)
          }else {
            alert(res.data.msg)
          }
        })
      }else {
        console.log(this.adminData)
        axios.post(
            'http://localhost:8057/user/loginAdmin', this.adminData
        ).then(res => {
          console.log(res)
          if (res.data.code === 200) {
            alert('登录成功')
            console.log(res.data.data.customerID)
            let back = res.data.data.customerID
            this.$emit("admin-login-success", back)
          }else {
            alert(res.data.msg)

          }
        })
      }
      this.isLoading = false
    }
  }
}
</script>

<style scoped>
/* --- 整体布局 --- */
.login-container {
  display: flex;
  min-height: 100vh;
  width: 100%;
  background-color: #f8f9fa;
}

/* --- 左侧品牌展示区 --- */
.brand-section {
  width: 50%;
  background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  position: relative;
  overflow: hidden;
}

.brand-section::before {
  content: '';
  position: absolute;
  top: -100px;
  left: -100px;
  width: 300px;
  height: 300px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  filter: blur(50px);
}

.brand-section::after {
  content: '';
  position: absolute;
  bottom: -150px;
  right: -150px;
  width: 400px;
  height: 400px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  filter: blur(60px);
}

.brand-content {
  text-align: center;
  z-index: 1;
}

.logo {
  margin-bottom: 30px;
}

.title {
  font-size: 36px;
  font-weight: 700;
  margin: 0 0 15px 0;
  letter-spacing: 1px;
}

.subtitle {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.8);
  max-width: 400px;
  margin: 0;
  line-height: 1.6;
}

/* --- 右侧登录表单区 --- */
.form-section {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.login-box {
  width: 100%;
  max-width: 400px;
}

.form-title {
  font-size: 28px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 8px;
}

.form-subtitle {
  font-size: 16px;
  color: #6b7280;
  margin-bottom: 30px;
}

.login-tabs {
  display: flex;
  width: 100%;
  background-color: #eef2f7;
  border-radius: 10px;
  padding: 5px;
  margin-bottom: 30px;
}

.tab-button {
  flex: 1;
  padding: 10px 15px;
  font-size: 14px;
  font-weight: 600;
  color: #4b5563;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.tab-button.active {
  background-color: #ffffff;
  color: #3b82f6;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.login-form .form-group {
  margin-bottom: 20px;
}

.login-form label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 8px;
}

.form-input {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  font-size: 14px;
  background-color: #f3f4f6;
  border: 2px solid transparent;
  border-radius: 10px;
  transition: all 0.3s ease;
}

.form-input:focus {
  outline: none;
  background-color: #ffffff;
  border-color: #3b82f6;
}

.password-wrapper {
  position: relative;
}

.password-toggle {
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  width: 20px;
  height: 20px;
  padding: 0;
  opacity: 0.5;
  transition: opacity 0.3s;
}
.password-toggle:hover {
  opacity: 1;
}

.form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  margin-bottom: 30px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  color: #4b5563;
  cursor: pointer;
}

.checkbox-label input {
  margin-right: 8px;
}

.link {
  color: #3b82f6;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s;
}

.link:hover {
  color: #1e3a8a;
}

.login-button {
  width: 100%;
  height: 48px;
  background: linear-gradient(90deg, #3b82f6 0%, #60a5fa 100%);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

.login-button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}

.login-button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.spinner {
  /* Add spinner animation if needed */
}

.form-footer {
  text-align: center;
  margin-top: 30px;
  font-size: 14px;
  color: #6b7280;
}

/* --- 响应式设计 --- */
@media (max-width: 1024px) {
  .brand-section {
    width: 40%;
  }
  .form-section {
    width: 60%;
  }
  .title {
    font-size: 30px;
  }
}

@media (max-width: 768px) {
  .login-container {
    flex-direction: column;
  }
  .brand-section {
    width: 100%;
    height: 30vh;
    min-height: 250px;
    padding: 20px;
  }
  .form-section {
    width: 100%;
    padding: 40px 20px;
  }
}
</style> 